<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1500px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="oplist">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="addGroup"
      >添加组</el-button>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="addCol(null)"
      >添加列</el-button>
    </div>
    <w-table
      :data="dataSource"
      :columns="columns"
      row-key="Id"
      :is-paging="false"
    >
      <template slot="showMode" slot-scope="e">
        {{ PhyColShowMode[e.row.ShowMode].text }}
      </template>
      <template slot="isNull" slot-scope="e">
        {{ e.row.IsNull ? "是" : "否" }}
      </template>
      <template slot="isHidden" slot-scope="e">
        {{ e.row.IsHidden ? "是" : "否" }}
      </template>
      <template slot="isQueryHide" slot-scope="e">
        {{ e.row.IsQueryHide ? "是" : "否" }}
      </template>
      <template slot="width" slot-scope="e">
        <span v-if="e.row.Width">{{ e.row.Width + "px" }}</span>
      </template>
      <template slot="action" slot-scope="e">
        <template v-if="e.row.IsGroup">
          <el-button
            type="success"
            size="mini"
            circle
            icon="el-icon-plus"
            @click="addCol(e.row.Id)"
          />
          <el-button
            type="primary"
            size="mini"
            circle
            icon="el-icon-edit"
            @click="editGroup(e.row.Id)"
          />
          <el-button
            v-if="e.row.Children == null || e.row.Children.length === 0"
            type="danger"
            size="mini"
            circle
            icon="el-icon-delete"
            @click="dropGroup(e.row)"
          />
        </template>
        <template v-else>
          <el-button
            type="primary"
            size="mini"
            circle
            icon="el-icon-edit"
            @click="editCol(e.row.Id)"
          />
          <el-button
            type="danger"
            size="mini"
            circle
            icon="el-icon-delete"
            @click="dropCol(e.row)"
          />
        </template>
      </template>
      <template slot="sort" slot-scope="e">
        <el-button
          v-if="e.row.Sort > prtSort[e.row.groupId].min"
          :type="e.row.groupId == 'root' ? 'primary' : 'default'"
          icon="el-icon-caret-top"
          circle
          @click="setSort(e.row, false)"
        />
        <el-button
          v-if="e.row.Sort < prtSort[e.row.groupId].max"
          :type="e.row.groupId == 'root' ? 'primary' : 'default'"
          icon="el-icon-caret-bottom"
          circle
          @click="setSort(e.row, true)"
        />
      </template>
    </w-table>
    <editPhyGroup :id="groupId" :columns="dataSource" :form-id="formId" :table-id="tableId" :visible.sync="groupVisible" @close="closeEdit" />
    <editPhyColumn :id="id" :columns="dataSource" :form-id="formId" :group-id="groupId" :table-id="tableId" :visible.sync="colVisible" @close="closeEdit" />
  </el-dialog>
</template>

<script>
import { GetCols } from '@/customForm/api/phyQueryTable'
import * as colApi from '@/customForm/api/phyQueryColumn'
import * as groupApi from '@/customForm/api/phyQueryGroup'
import editPhyGroup from './editPhyGroup.vue'
import editPhyColumn from './editPhyColumn.vue'
import { PhyColShowMode } from '@/customForm/config/formConfig'
export default {
  components: {
    editPhyGroup,
    editPhyColumn
  },
  props: {
    formId: {
      type: String,
      default: null
    },
    show: {
      type: String,
      default: null
    },
    tableId: {
      type: String,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      PhyColShowMode,
      isRefresh: false,
      prtSort: {},
      id: null,
      groupId: null,
      title: null,
      colVisible: false,
      groupVisible: false,
      columns: [
        {
          key: 'Label',
          title: '标题',
          align: 'left',
          minWidth: 120
        },
        {
          key: 'Name',
          title: '列名',
          align: 'center',
          minWidth: 120
        }, {
          key: 'ShowMode',
          title: '显示方式',
          align: 'center',
          width: 120,
          slotName: 'showMode'
        },
        {
          key: 'DataType',
          title: '数据类型',
          align: 'center',
          width: 120
        },
        {
          key: 'IsNull',
          title: '允许空值',
          align: 'center',
          width: 80,
          slotName: 'isNull'
        },
        {
          key: 'IsHidden',
          title: '是否隐藏',
          align: 'center',
          width: 80,
          slotName: 'isHidden'
        },
        {
          key: 'IsQueryHide',
          title: '列表中隐藏',
          align: 'center',
          width: 80,
          slotName: 'isQueryHide'
        },
        {
          key: 'Sort',
          title: '排序位',
          align: 'center',
          width: 150,
          slotName: 'sort'
        },
        {
          key: 'Action',
          title: '操作',
          align: 'left',
          width: 150,
          fixed: 'right',
          slotName: 'action'
        }
      ],
      dataSource: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.isRefresh = false
          this.title = '编辑' + this.show + '表结构'
          this.load()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    closeEdit(isRefresh) {
      if (isRefresh) {
        this.isRefresh = true
        this.load()
      }
    },
    async setSort(row, isNext) {
      const res = await colApi.SetSort({
        TableId: this.tableId,
        GroupId: row.groupId === 'root' ? 0 : row.groupId,
        Id: row.Id,
        IsNext: isNext
      })
      if (res) {
        this.isRefresh = true
        this.load()
      }
    },
    dropGroup(row) {
      const title = '确认删除组 ' + row.Label + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await groupApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.isRefresh = true
      this.load()
    },
    dropCol(row) {
      const title = '确认删除列 ' + row.Label + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDropCol(row.Id)
      })
    },
    async submitDropCol(id) {
      await colApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.isRefresh = true
      this.load()
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close', this.isRefresh)
    },
    closeCol(isRefresh) {
      if (isRefresh) {
        this.isRefresh = true
        this.load()
      }
    },
    closeGroup(isRefresh) {
      if (isRefresh) {
        this.isRefresh = true
        this.load()
      }
    },
    editGroup(id) {
      this.groupId = id
      this.groupVisible = true
    },
    addCol(gid) {
      this.groupId = gid
      this.id = null
      this.colVisible = true
    },
    editCol(id) {
      this.groupId = null
      this.id = id
      this.colVisible = true
    },
    addGroup() {
      this.groupId = null
      this.groupVisible = true
    },
    format(col, gId) {
      if (col.IsGroup) {
        let minSort = Number.MAX_VALUE
        let maxSort = 1
        col.groupId = gId
        col.Children.forEach((c) => {
          if (c.Sort > maxSort) {
            maxSort = c.Sort
          }
          if (c.Sort < minSort) {
            minSort = c.Sort
          }
          this.format(c, col.Id)
        })
        this.prtSort[col.Id] = {
          min: minSort,
          max: maxSort
        }
      } else {
        col.groupId = gId
      }
    },
    async load() {
      this.groupId = null
      this.id = null
      const list = await GetCols(this.tableId)
      if (list == null || list.length === 0) {
        this.dataSource = []
        return
      }
      let minSort = Number.MAX_VALUE
      let maxSort = 1
      list.forEach((c) => {
        c.colSpan = {
          Label: c.IsGroup ? 6 : 1
        }
        this.format(c, 'root')
        if (c.Sort > maxSort) {
          maxSort = c.Sort
        }
        if (c.Sort < minSort) {
          minSort = c.Sort
        }
      })
      this.prtSort['root'] = {
        min: minSort,
        max: maxSort
      }
      this.dataSource = list
    }
  }
}
</script>

<style scoped>
.oplist {
  width: 100%;
  padding: 10px;
  text-align: right;
}
</style>
